<template>  
    <div>
        <article class="article">
            <header class="article-header">
                <h3>{{title}}</h3>
            </header>
        <div v-html="content" class="article-content">
        </div>    
        <my-operation :data="data"></my-operation>
        </article>
        <div class="well">
           给我一条评论吧！
        </div>
        <my-comment @addComment="addComment"></my-comment>
        <div class="panel panel-info" v-for="(comment,index) in comments">
            <div class="panel-heading">
                发表于：{{comment.entdate}}
            </div>
            <div class="panel-body">
                <p>{{comment.content}}</p>
            </div>
        </div>
    </div>
</template>
<script>
    import API from '../api'
    import URL from '../urls'
    import myOperation from './Operation'
    import myComment from './Comment'
    export default {
        data() {
            return {
                title: '',
                content: '',
                entdate: '',
                view: '',
                praise: '',
                comment_num: '',
                data: '',
                comments: '',
                tags:''
            }
        },
        methods: {
            getArticle() {
                var params = {
                    data:{
                        fidno:this.$route.params.id
                    }
                }
                API.request(URL.GETARTICLES,params,(res)=>{
                    if(res){
                        this.data = res.Table2[0]
                        this.title = res.Table2[0].title
                        this.content = res.Table2[0].content
                        this.entdate = res.Table2[0].entdate
                        this.view = res.Table2[0].view
                        this.praise = res.Table2[0].praise
                        this.comment_num = res.Table2[0].comment_num
                        this.tags = res.Table2[0].tags
                    }
                })
            },
            getComment() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.1:5000/api/article/getcomment',
                    data: {
                        fgrandid: _this.$route.params.id
                    },
                    crossDomain: true,
                    async: true,
                    dataType: 'json',
                    success: function(res) {
                        _this.comments = res.Table2
                    },
                    error: function(res) {
                        console.log(res)
                    }
                })
            },
            addComment(){
                this.data.comment_num ++ 
            }
        },
        created: function() {
            this.getArticle()
            this.getComment()
        },
        watch: {
            '$route': 'getArticle,getComment'
        },
        components: {
            myOperation,
            myComment
        },
        beforeRouteLeave(to, from, next) {
            // this.addView()
            next()
        }
    }
</script>
<style>
    .article {
        margin-bottom: 20px;
        padding: 20px;
        border: 1px solid #999;
        border-radius: 4px;
        box-shadow: 5px 5px 3px #ccc;
    }
    
    .article-header {
        margin: 15px;
        border-bottom: 1px solid #999
    }
    
    .article-content {
        text-align: left;
        text-indent: 30px;
        padding: 10px;
    }
    
    .operation {
        float: right
    }

    .panel{
        clear: both;

    }

    .panel .panel-heading{
        text-align: left
    }
    .panel .panel-body p {
        float: left
    }
</style>